<template>
	<view class="page pageBg">
		<view v-show="step == 1">
			<view class="title">
				<view class="big">完善信息</view>
				<view class="min">让大家更好的认识你</view>
			</view>
			<view class="form-form" style="margin-bottom: 100rpx;padding-top: 106rpx;">
				<view class="form-item">
					<view class="label">
						姓名
					</view>
					<view class="inputBox">
						<input type="text" style="padding-left: 45rpx;" value="" class="uni-input" v-model="inputName" placeholder="请输入姓名" />
					</view>
				</view>
			</view>
			<view class="changeClass">
				<view class="c-title">加入学校班级</view>
				<view class="tabs">
					<!-- <view class="tab dis" v-for="(item,index) in tabData" @tap="changeTab(index)" :class="{'active': current == index}" :key="index">{{item.name}}</view> -->
					<view class="tab" v-for="(item,index) in tabData" :class="[{'active': current == index},{'dis':index == 1}]" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="btbox">
				<view class="bt bt-a" @tap="gostep(2)" v-if="inputName" >下一步</view>
				<view class="bt bt-a dis" v-if ="!inputName" >下一步</view>
			</view>
		</view>
		<view v-show="step == 2">
			<view class="title">
				<view class="big"><text class="blue">{{inputName}}</text>同学，你好！</view>
				<view class="min">请选择加入学校、班级</view>
			</view>
			<view class="form-form">
				<view class="form-item">
					<view class="label">
						地区
					</view>
					<view class="inputBox">
						<view class="pickerBox">
							<picker @change="bindPickerChange($event,'area')" :value="form_data.area" :range="range.area" range-key="name">
								<view class="uni-input" :class="{first:form_data.area == 0}">{{range.area[form_data.area].name}}</view>
							</picker>	
						</view>
						<image src="/static/img/right-arrow-h.png" mode="" class="right-arrow"></image>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						学校
					</view>
					<view class="inputBox">
						<view class="pickerBox">
							<picker @change="bindPickerChange($event,'school')" :value="form_data.school" :range="range.school" range-key="name">
								<view class="uni-input" :class="{first:form_data.school == 0}">{{range.school[form_data.school].name}}</view>
							</picker>
							<image src="/static/img/right-arrow-h.png" mode="" class="right-arrow"></image>
						</view>
					</view>
				</view>
				<view class="form-item" v-if="tabId == 1">
					<view class="label">
						学号
					</view>
					<view class="inputBox">
					     <view class="pickerBox">
							 <input class="uni-input" placeholder="请输入学号" placeholder-class="placeholderInput" type="text" v-model="form_data.stu_no">
						 </view>
					</view>
				</view>
				<view class="form-item" v-if="tabId == 2">
					<view class="label">
						学院
					</view>
					<view class="inputBox">
					     <view class="pickerBox">
							 <picker @change="bindPickerChange($event,'college')" :value="form_data.college" :range="range.college" range-key="name">
								<view class="uni-input" :class="{first:form_data.college == 0}">{{range.college[form_data.college].name}}</view>
							</picker>
							<image src="/static/img/right-arrow-h.png" mode="" class="right-arrow"></image>
						 </view>
					</view>
				</view>
				<view class="form-item" v-if="tabId == 2">
					<view class="label">
						入学年级
					</view>
					<view class="inputBox">
					   <view class="pickerBox">
						   <picker @change="bindPickerChange($event,'grade')" :value="form_data.grade" :range="range.grade" range-key="name">
						   		<view class="uni-input" :class="{first:form_data.grade == 0}">{{range.grade[form_data.grade].name}}</view>
						   </picker>
						   <image src="/static/img/right-arrow-h.png" mode="" class="right-arrow"></image>
						</view>   
					</view>
				</view>
				<view class="form-item" v-if="tabId == 2">
					<view class="label">
						班级
					</view>
					<view class="inputBox">
					    <view class="pickerBox">
							<picker @change="bindPickerChange($event,'class')" :value="form_data.class" :range="range.class" range-key="name">
								<view class="uni-input" :class="{first:form_data.class == 0}">{{range.class[form_data.class].name}}</view>
							 </picker>
							 <image src="/static/img/right-arrow-h.png" mode="" class="right-arrow"></image>
						</view>	
					</view>
				</view>
			</view>
			
			<view class="btbox2" style="padding-top: 60rpx;">
				<view class="bt bt-a" @tap="gostep(1)">返回上一步</view>
				<view class="bt bt-a dis" v-if="!canNext2">完成</view>
				<view class="bt bt-a" v-if="canNext2" @tap="gostep(3)">完成</view>
			</view>
		</view>
		<view v-show="step == 3">
			<view class="title">
				<view class="big"><text class="blue">{{inputName}}</text>同学，你好！</view>
				<view class="min">请选择加入学校、班级</view>
			</view>
			<view class="resultWrap">
				<view class="result">
					<view class="dl">
						地区：<text v-show='form_data["area"]'>{{range["area"][form_data["area"]].name}}</text>
				   </view>
				   <view class="dl">
					   学校：<text v-show='form_data["school"]'>{{range["school"][form_data["school"]].name}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 1">
				   		学号：<text v-show='form_data["stu_no"]'>{{form_data.stu_no}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 1">
				   		学院：<text v-show='tabId1school'>{{tabId1school}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 1">
				   		专业：<text v-show='tabId1zy'>{{tabId1zy}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 1">
				   		班级：<text v-show='tabId1calss'>{{tabId1calss}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 2">
						学院：<text v-show='form_data["college"]'>{{range["college"][form_data["college"]].name}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 2">
						入学年级：<text v-show='form_data["grade"]'>{{range["grade"][form_data["grade"]].name}}</text>
				   </view>
				   <view class="dl" v-if="tabId == 2">
						班级：<text v-show='form_data["class"]'>{{range["class"][form_data["class"]].name}}</text>
				   </view>
			</view>
			</view>
			<view class="btbox2" style="padding-top: 120rpx;">
				<view class="bt bt-a" @tap="gostep(2)">返回上一步</view>
				<view class="bt bt-a dis" v-if="!canNext2">确认</view>
				<view class="bt bt-a"  v-if="canNext2" @tap="finish">确认</view>
			</view>
			<view class="telBtn" @tap="showPopu">联系学校管理员</view>
		</view>
		<uni-popup ref="popup" class="popWrap" type="bottom" border-radius="10px 10px 0 0">
			<view class="delog inner">
				<view class="name">管理员：{{manage}}</view>
				<view class="tel">{{phone}}</view>
				<view class="button" @tap="boda">拨打</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" :showClose='fasle' :title="fasle" content="您的姓名和学号匹配错误，请重新输入！如有疑问可联系学校管理员" ></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import { mapMutations } from "vuex";
	import { getAera, getSchool, getCollege, getGrade, getClass, checkno } from '@/api/app.js'
	import { addStudent, getUserInfo } from '@/api/user.js'
	export default {
		data() { 
			return {
				current:0,
				canNext1:true,
				canNext2:false,
				step:1,
				inputName:'',
				tabId:1,
				tabId1school:'',
				tabId1zy:'',
				tabId1calss:'',
				phone:'',
				manage:'',
				msgType:'info',
				apiSchoolId:'',
				form_data:{
					 area:0,
					 school:0,
					 college:0,
					 grade:0,
					 class:0,
					 stu_no:''
				 },
				 range:{
					 area:[{'id':-100,name:'请选择'},],
					 school:[{'id':-100,name:'请选择'}],
					 college:[{'id':-100,name:'请选择'}],
					 grade:[{'id':-100,name:'请选择'}],
					 class:[{'id':-100,name:'请选择'}]
			    },
				tabData: [
					{
						name:'输入学号加入',
						id:1
					},{
						name:'选择班级加入',
						id:2
				}]
			}
		},
		onLoad() {
			this.GetAera()
		},
		watch: {
			form_data: {
			    handler(newVal, oldVal) {
				   this.checkCan2();
			    },
			    deep: true 
			}
		},
		methods: {
			...mapMutations(["setUserInfo"]),
			async GetUerInfo() {
				const { data } = await getUserInfo();
				console.log(data);
				this.setUserInfo(data);
				this.$Router.replace('/pages/index/index')
			},
			async finish() {
				let post_data = {}
				if(this.tabId == 1) {
					post_data = {
						student_name:this.inputName,
						school_id:this.apiSchoolId,	
						no:this.form_data.stu_no
					}
				}
				if(this.tabId == 2) {
					post_data = {
						student_name:this.inputName,
						class_id:this.range.class[this.form_data.class].id
					}
				}
				const res = await addStudent(post_data);
				// console.log(res);
				if(res) {
					this.GetUerInfo();			
				}
			},
			async GetAera() {
				const { data } = await getAera()
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.area = data;
			},
			async GetSchool(cityId) {
				console.log("cityId",cityId);
				const { data } = await getSchool({city_id:cityId})
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.school = data;
			},
			async GetCollege(Id) {
				if(this.tabId == 1) {
					return;
				}
				const { data } = await getCollege({school_id:Id})
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.college = data;
			},
			async GetGrade(Id) {
				const { data } = await getGrade()
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.grade = data;
			},
			async GetClass() {
				const school_id = this.range["school"][this.form_data["school"]].id;
				const school_college_id = this.range["college"][this.form_data["college"]].id;
				const start_year = this.range["grade"][this.form_data["grade"]].id;
				const obj = {
					school_id,
					school_college_id,
					start_year
				}
				const { data } = await getClass(obj)
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.class = data;
			},
			changeTab(index) {
				this.current = index;
				this.tabId = this.tabData[index].id;
			},
			showPopu() {
				this.$refs.popup.open('bottom');
			},
			bindPickerChange(e,type) {
		        const index = e.detail.value;
				const id = this.range[type][index].id;
				console.log(id);
				this.form_data[type] = index;
				if(type == 'area') {
					this.form_data.college = 0;
					this.form_data.school = 0;
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.school = [{name:'请选择',id:-100}];
					this.range.college = [{name:'请选择',id:-100}];
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					if (id != -100) {
						this.GetSchool(id)
					};
				} 
				if(type == 'school') {
					this.form_data.college = 0;
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.college = [{name:'请选择',id:-100}];
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					if (id != -100) {
						this.GetCollege(id)
					};
				} 
				if(type == 'college') {
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					this.GetGrade(id)
				} 
				if(type == 'grade') {
					this.range.class= [{name:'请选择',id:-100}];
					this.form_data.class = 0;
					this.GetClass()
				} 
			},
			checkCan2() {
				if(this.tabId == 2) {
				 const values = Object.values(this.form_data);
				 this.canNext2 =  values.every(value  => value != 0);
				} 
				 if(this.tabId == 1) {
					 if(this.form_data.stu_no && this.form_data.area > 0 && this.form_data.school > 0) {
						  this.canNext2 =  true;
					 }
				 } 
			},
			//2024311210301 华农  解镜翰  this.checkNum(this.form_data.stu_no,this.inputName,this.form_data.school)
			async checkNum(num,name,school_id){
				const res = await checkno({
					student_name:name,
					school_id:this.range.school[this.form_data.school].id,
					no:num
				});
				if (res.data.college) {
					this.canNext2 = true;
					this.tabId1school = res.data.college;
					this.tabId1zy = res.data.profession;
					this.tabId1calss = res.data.class;
					this.canNext2 = true;
				}  else {
					this.msgType = 'info'
					this.$refs.alertDialog.open()
					this.canNext2 = false;
				}
				this.manage = res.data.contacts;
				this.phone = res.data.contacts_phone;
				this.apiSchoolId = res.data.school_id;
			},
			gostep(num) {
				console.log(num);
				if(num == 3 && this.tabId == 1) {
					this.checkNum(this.form_data.stu_no,this.inputName,this.form_data.school)
				}
				this.checkCan2();
				this.step = num;
			},
			
			boda(){
				wx.makePhoneCall({
					phoneNumber: this.phone
				})
			}
		}
	}
</script>
<style lang="scss">
	@import "@/static/css/login.scss";
	.popWrap {
		
	}

	.delog {
		 border-radius:10rpx 10rpx 0 0;
		 overflow: hidden;
		 width: 100vw;
		 padding: 50rpx 0;
		 background-color: #fff;
		 .name {
			 text-align: center;
			 font-size: 29rpx;
		 }
		 .tel {
			 color:#928b8b;
			 text-align: center;
			 padding: 30rpx 0;
			 font-size: 28rpx;
		 }
		 .button {
			 background-color: #3c84f4;
             color: #fff;
             border-radius: 3rpx;  
			 width: 130rpx;
			 height: 56rpx;
			 border-radius: 5rpx;
			 @include center;
			 font-size: 28rpx;
			 margin: 0 auto;
		 }
	}
	.telBtn {
		color: #928b8b;
		text-align: center;
	}
</style>
